<template>
	<div class="finish">
		<section>
			<nav>
				<p class="proof">图片证据</p>
				<p class="proof_font">{{ imgNum }}张/9</p>
			</nav>
			<aside>
				<div class="img-box" v-for="(i,index) in images" :key="index">
					<img :src="i" alt="">
				</div>
				<div class="img image">
					<img src="@/assets/images/add_img.png" alt="">
					<input type="file" accept="image/*" @change="getImg" ref="inputer" />
				</div>
			</aside>
			<div class="text_area">
				<textarea name="" id="" placeholder="投诉内容" v-model="page"></textarea>
				<p>{{ fontNum}}/100</p>
			</div>
		</section>
		<article @click="submit" :class="images.length &&  page !=''?'color':'' ">
			提交
		</article>
	</div>
</template>

<script>
	import { setTimeout } from 'timers';
	import { constants } from 'fs';
	let formData;
	export default {
		name: "finish",
		data() {
			return {
				Img: [],
				// 用来记录图片的数量
				imgNum: 0,
				//用来记录字符串的数量
				fontNum: 0,
				file: [],
				url: "",
				// 输入的字
				page: "",
				imgs: "",
				src: "",
				filesArr: null,
				imgs: [],
				img_str: [],

				images: [],
				images_num: 0,

			}
		},
		mounted() {
			// formdata传输图片  先进行定义
			formData = new FormData();
		},
		methods: {
			getImg(event) {
				let _formData = new FormData();
				_formData.append('file', event.target.files[0]);
				this.$http.post("http://47.105.168.147:8080/api/common/uploadImage.do", _formData).then((response) => {
					if(response.data.code == "0") {
						this.images_num += 1;
						this.images.push(response.data.data)
					} else {
						alert("图片上传失败！");
					}
				}).catch((error) => {
					console.log(error);
				});
				return false;
				// var formData = new FormData();
				// alert(111)
				let reader = new FileReader();
				let file = event.target.files[0];
				// var windowURL = window.URL || window.webkitURL;
				// this.src = windowURL.createObjectURL(event.target.files[0]);
				// console.log(this.src,"测试图片路径")
				reader.readAsDataURL(file);
				_this.filesArr = _this.$refs.inputer.files
				formData.append('file', _this.filesArr[0]);
				for(var i = 0; i < this.filesArr.length; i++) {
					// console.log(this.filesArr[i],"测试")
					formData.append('file', _this.filesArr[i]);
					// console.log(formData,"这是上面东西")
				}
				reader.onload = function() {
					// 将图片进行
					_this.Img.push(reader.result)
					// 获取到图片
					// 根据字符串"，"验证 获取base64位码
					_this.imgs = reader.result.split(",")
					// 获取图片的长度 当imgNum等于八时  隐藏
					_this.imgNum = _this.Img.length
					// 将bush64 放在一个数组中  准备传输
					_this.img_str.push(_this.imgs[1])
					// console.log(_this.img_str)
					// console.log(_this.img_str,"测试base64")
					setTimeout((res => {
						// console.log("定时器")
						// 将input 框获取到的数据清空
						_this.$refs.inputer.value = null
					}), 0)
				}
			},
			submit() {
				if(this.images.length != 0 && this.page != '') {
					let config = {
						headers: {
							'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
						}
					};
					let token = localStorage.getItem("user_token")
					let context = this.page

					formData.append('token', token);
					formData.append('type', 1);
					formData.append('imgs', this.images.join(","));
					formData.append('context', context);

					this.$http.post("http://47.105.168.147:8080/api/customer/pushFeedback.do", formData).then((response) => {
						if(response.data.code == "0") {
							alert("提交成功！");
						}
					}).catch((error) => {
						console.log(error);
					});
				}
			}
			// 用来上传图片  设置请求头
			//     let config = {
			//         headers: {
			//         'Content-Type': 'multipart/form-data'  //之前说的以表单传数据的格式来传递fromdata
			//         }
			//     };         
			//     formData.append('a','aa'); //appeend其他参数
			//     this.$axios.post(url,formData,config).then((res) => {
			//         if(res.data.stateCode === 200){
			//             alert("成功")
			//             }
			//         }) .catch((error) =>{
			//             console.log(error);
			//         });
		},
		created() {},
		watch: {
			page() {
				this.fontNum = this.page.length
			}
		}
	}
</script>

<style lang="scss" scoped>
	.finish {
		.van-hairline--bottom {
			background: blue;
			.van-icon-arrow-left {
				font-size: 16px;
				font-weight: 600;
				color: #fff;
			}
			.van-ellipsis {
				color: #fff;
			}
		}
		section {
			padding: 15px;
			background: #fff;
			nav {
				display: flex;
				text-align: left;
				justify-content: space-between;
				p {
					margin: 0px;
				}
				.proof {
					font-size: 16px;
					font-weight: 250;
					color: #323232;
				}
				.proof_font {
					font-size: 16px;
					font-weight: 250;
					color: #ccc;
				}
			}
			aside {
				margin-top: 20px;
				overflow: hidden;
				.img {
					height: 70px;
					margin-top: 15px;
					float: left;
					position: relative;
					width: 70px;
					margin-right: 15px;
					border: 1px solid #eeeeee;
					&.image {
						border: 0px;
					}
					img {
						height: 100%;
						width: 100%;
					}
					input {
						height: 70px;
						width: 70px;
						position: absolute;
						left: 0;
						top: 0;
						opacity: 0;
					}
				}
				.img-box {
					height: 70px;
					margin-top: 15px;
					width: 70px;
					float: left;
					margin-right: 15px;
					img {
						height: 100%;
						width: 100%;
					}
				}
			}
			.text_area {
				width: 100%;
				margin-top: 15px;
				height: 100px;
				border: 0px;
				padding: 10px;
				font-size: 16px;
				border-top: 1px solid #eee;
				color: rgba(204, 204, 204, 1);
				textarea {
					height: 100%;
					width: 100%;
					border: 0px;
				}
				p {
					margin: 0px;
					text-align: right;
					font-size: 14px;
					font-weight: 250;
					color: rgba(204, 204, 204, 1);
				}
			}
			.end {
				margin: 0px;
				text-align: right;
				font-size: 14px;
				font-weight: 250;
				color: rgba(204, 204, 204, 1);
			}
		}
		article {
			width: 240px;
			height: 45px;
			margin: 63px auto 0px;
			background: #999;
			border-radius: 10px;
			font-size: 18px;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 45px;
			&.color {
				background: rgba(57, 143, 240, 1);
				border: 1px solid rgba(49, 121, 204, 1);
			}
		}
	}
</style>